<template>
	<view class="register-container">
		<!-- 页面标题文案 -->
		<view class="register-title">
			用户注册
		</view>
		<!-- 表单 -->
		<view class="register-form">
			<u-form 
			ref="registerForm" 
			labelPosition="top" 
			:model="registerForm" 
			:rules="rules"
			labelAlign="right"
			label-width="80px"
			:labelStyle="{'font-size': '15px'}">
				<view class="register-form-item">
					<u-form-item label="账号:" prop="username" labelPosition="left">
						<u-input v-model="registerForm.username" clearable placeholder-style="color:black;" placeholder="请输入账号" suffixIcon="account" :suffixIconStyle="{'color': 'black'}"/>
					</u-form-item>
				</view>
				<view class="register-form-item">
					<u-form-item label="手机号:" prop="phone" labelPosition="left">
						<u-input v-model="registerForm.phone" clearable placeholder-style="color:black;" placeholder="请输入手机号" suffixIcon="phone" :suffixIconStyle="{'color': 'black'}"/>
					</u-form-item>
				</view class="register-form-item">
				<view class="register-form-item">
					<u-form-item label="密码:" prop="password" labelPosition="left">
						<u-input v-model="registerForm.password" clearable placeholder-style="color:black;" password placeholder="请输入密码" suffixIcon="lock" :suffixIconStyle="{'color': 'black'}"/>
					</u-form-item>
				</view>
				<view class="register-form-item">
					<u-form-item label="确认密码:" prop="surePwd"labelPosition="left">
						<u-input v-model="registerForm.surePwd" clearable placeholder-style="color:black;" password  placeholder="请输入确认密码" suffixIcon="lock" :suffixIconStyle="{'color': 'black'}"/>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="have-user-to-login">
			<view class="user-to-login-link">
				<u-text text="已有账号？去登录" color="#19be6b" :under-line="true" @click="toLogin"></u-text>
			</view>
		</view>
		<view class="register-button">
			<view class="btn-custom-style">
				<u-button type="primary" :loading="loading" loadingText="提交中..."
				@tap="submitRegister">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { register } from '@/api/user.js'
	
	export default {
		data() {
			return {
				registerForm: {
					username: '',
					password: '',
					surePwd: '',
					phone: '',
				},
				rules:{
					username: [{required: true, message: '请输入账号', trigger: ['blur', 'change']}],
					phone: [{required: true, message: '请输入手机号', trigger: ['blur', 'change']}],
					password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
					surePwd: [{required: true, message: '请输入确认密码', trigger: ['blur', 'change']}]
				},
				loading: false,
			}
		},
		onReady(){
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.registerForm.setRules(this.rules)
		},
		methods: {
			toLogin(){
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			submitRegister(){
				this.loading = true
				this.$refs.registerForm.validate()
				.then(async () => {
					if(this.registerForm.password !== this.registerForm.surePwd){
						uni.$u.toast('两次密码输入不一致')
						this.loading = false
						return;
					}
					
					const res = await register(this.registerForm)
					if(res.code != 200){
						uni.$u.toast(res.message)
						this.loading = false
						return;
					}
					this.loading = false
					this.registerForm = {}
				}).catch((err) => {
					console.log(err)
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		width: 100%;
		height: calc(100vh - 0px);
		background-image: url(@/static/index.png);
		background-size: cover;
		background-repeat: no-repeat;
		
		.register-title {
			font-family: 'Courier New', Courier, monospace;
			font-size: 2rem;
			color: #32CD32;
			padding-top: calc(100vh - 600px);
			display: flex;
			justify-content: center;
		}
		
		.register-form {
			height: calc(100vh - 300px);
			display: flex;
			justify-content: center;
			
			.register-form-item {
				width: 300px;
				margin-top: 25px;
				height: 50px;
				margin-right: 50px;
				
				::v-deep .u-form-item__body__right__message {
					display: flex !important;
					justify-content: center !important;
				}
			}
		}
		
		.register-button {
			margin-top: 60px;
			display: flex;
			justify-content: center;
			
			.btn-custom-style {
				width: 200px;
				border-radius: 20px;
				background-color: #3c9cff;
				overflow: hidden;
			}
		}
		
		.have-user-to-login {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			
			.user-to-login-link {
				margin-right: 15px;
				border-bottom: 1px solid red;
			}
		}
	}
</style>
